<template>
  <div class="page1">
    <el-row class="content">
      <el-col class="content3" :span="8">
        <el-row class="content4">
          <div class="echarts1"></div>
        </el-row>
        <el-row class="content4">
          <div class="echart echarts2"></div>
        </el-row>
      </el-col>
      <el-col class="content3" :span="8">
        <el-row class="content5">
          <div class="echart echart3"></div>
        </el-row>
        <el-row class="content6">
          <div v-if="d1.name" class="block">
            <span class="s" style="display: inline-block">
              <div class="name">{{ d1.name[d1.name.length - 1] }}</div>
              <div class="nameKey">名称</div>
            </span>
            <span class="s" style="display: inline-block">
              <div class="name">
                {{ d1.new_price[d1.new_price.length - 1] }}
              </div>
              <div class="nameKey">当前价格</div>
            </span>
            <span class="s" style="display: inline-block">
              <div class="name">
                {{ d1.die_e[d1.die_e.length - 1].toFixed(2) }}
              </div>
              <div class="nameKey">涨幅</div>
            </span>
            <span class="s" style="display: inline-block">
              <div class="name">{{ d1.e[d1.e.length - 1] }}万</div>
              <div class="nameKey">成交额</div>
            </span>
          </div>
        </el-row>
      </el-col>
      <el-col class="content3" :span="8">
        <el-row class="content7">
          <div class="echart echart4"></div>
        </el-row>
        <el-row class="content7">
          <div class="echart echart5"></div>
        </el-row>
      </el-col>
      <!-- <div class="echarts"></div> -->
    </el-row>
  </div>
</template>

<script>
import { stockDiag, getHomeData } from "@/api/page2Api";
const upColor = "#ec0000";
const upBorderColor = "#8A0000";
const downColor = "#00da3c";
const downBorderColor = "#008F28";
// Each item: open，close，lowest，highest
function splitData(rawData) {
  const categoryData = [];
  const values = [];
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0]);
    values.push(rawData[i]);
  }
  return {
    categoryData: categoryData,
    values: values,
  };
}
export default {
  name: "page1",
  props: ["selectRangeDate"],
  components: {},
  data() {
    return {
      keyword: "上证指数",
      data0: {},
      title: "",
      options: [
        { value: "上证指数" },
        { value: "深证成指" },
        { value: "中小板指" },
        { value: "创业扳指" },
        { value: "沪深300" },
        { value: "上证50" },
      ],
      pieData: [],
      d1: {},
      chart1: null,
    };
  },
  methods: {
    search() {
      stockDiag(this.keyword).then((res) => {
        this.data0 = splitData(res.kline_data);
        this.title = res.name;
        this.rChart();
        // console.log(res,'123')
      });
    },
    calculateMA(dayCount) {
      var result = [];
      for (var i = 0, len = this.data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += +this.data0.values[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },
    rChart() {
      let chart = document.querySelector(".echart3");
      let myChart = this.$echarts(chart);
      for (var i = 0; i < 7; i++) {
        this.pieData.push({
          name: this.d1.name[i],
          value: this.d1.new_price[i],
        });
      }
      console.log(this.pieData, 'this.pieData')
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "价格",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieData,
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
    r1() {
      let chart = document.querySelector(".echarts1");
      let myChart = this.$echarts(chart);
      let option = {
        color: ["#c23531", "#61a0a8"],
        title: {
          text: "热门股涨幅",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["当前价格", "涨幅"],
          textStyle: {
            color: "#fff",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.d1.name.slice(0, 5),
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "当前价格",
            type: "bar",
            barGap: 0,

            emphasis: {
              focus: "series",
            },
            data: this.d1.new_price.slice(0, 5),
          },
          {
            name: "涨幅",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: this.d1.die_e.slice(0, 5),
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
    r2() {
      let dd = [...new Set(this.d1.date_time)];
      let chart = document.querySelector(".echarts2");
      let myChart = this.$echarts(chart);
      let option = {
        title: {
          text: "成交额趋势",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.d1.name.slice(10, 13),
          textStyle: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: dd.slice(0, 6),
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: this.d1.name[10],
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: this.d1.name[11],
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: this.d1.name[12],
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
    r3() {
      let chart = document.querySelector(".echart4");
      let myChart = this.$echarts(chart);
      let dd = [...new Set(this.d1.date_time)];
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "成交量趋势（万手）",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          top: 18,
        },
        legend: {
          data: this.d1.name.slice(14, 19),
          textStyle: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: dd.slice(0, 6),
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: this.d1.name[14],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 160, 101, 264, 90, 340, 270],
          },
          {
            name: this.d1.name[15],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 146, 111, 204, 220, 340, 380],
          },
          {
            name: this.d1.name[16],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 132, 201, 234, 190, 130, 220],
          },
          {
            name: this.d1.name[17],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 252, 231, 134, 190, 230, 120],
          },
          {
            name: this.d1.name[18],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
    r4() {
      let chart = document.querySelector(".echart5");
      let myChart = this.$echarts(chart);
      let option = {
        title: {
          text: "平均成交量",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.d1.name.slice(5, 10),
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "价格",
            type: "bar",
            data: this.d1.new_price.slice(5, 10),
          },
          {
            name: "成交量",
            type: "bar",
            data: this.d1.die_e.slice(5, 10),
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    getHomeData()
      .then((res) => {
        this.d1 = res;
        console.log(res);
      })
      .catch(() => {
        this.d1 = require("./data.json")["data"];
        // this.search();
        this.r1();
        this.rChart();
        this.r2();
        this.r3();
        this.r4();
      });
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.echarts2 {
  // background: #6eddf1;
}
.block {
  display: inline-block;
  margin: 0 auto;
  .s {
    margin-right: 16px;
    .name {
      color: yellow;
      font-size: 25px;
      text-align: center;
    }
    .nameKey {
      font-size: 13px;
      color: aliceblue;
      text-align: center;
    }
  }
}

.title {
  position: absolute;
  display: inline-block;
  color: #6eddf1;
  background: #14418e;
  left: 50%;
  transform: translate(-50%, -70%);
  font-size: 12px;
  .title-10 {
    // display: inline-block;
    padding: 2px 5px;
    // background: radial-gradient(4.75rem 0.9rem ellipse, rgba(7, 9, 34, .8) 60%, rgb(21, 67, 145));
  }
}

.page1 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #000;
  overflow: hidden;

  .content {
    height: 100%;
    .content3 {
      height: 100%;
      .content4 {
        height: 50%;
        width: 100%;
        .echarts1 {
          width: 100%;
          height: 100%;
        }
      }
      .content5 {
        height: 80%;
        width: 100%;
        .echart3 {
        }
      }
      .content6 {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
    .i_col {
      display: flex;
      justify-content: center;
    }
    .ivu-col {
      height: 100%;
    }

    .circlePie {
      height: 100%;
      padding: 0 0 40px;
      text-align: center;
      position: relative;

      canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }

      #dot {
        background: rgba(0, 0, 0, 0);
      }
    }
    .center_list {
      height: 100%;
    }
    .list {
      height: 100%;

      .left,
      .right {
        background: #0d1341;
      }

      .left,
      .right,
      .center {
        width: 100%;
        height: 95%;
        border: 1px solid #0d2451;
        position: relative;

        #left1,
        #left2,
        #left3,
        #right1,
        #right2,
        #right3,
        #center2 {
          height: 100%;
        }

        .chart-68 {
          width: 100%;
          height: 100%;
          float: left;
        }

        .chart-32 {
          width: 32%;
          height: 100%;
          float: left;
        }
      }
    }
  }

  .bottom-list {
    height: 35%;

    .ivu-col {
      height: 100%;

      .list {
        height: 100%;
        width: 33.3333%;
        // padding-right: 1.5%;
        float: left;

        #bottom_4 {
          // padding: 0 20px;
        }

        .bottom {
          width: 100%;
          height: 100%;
          border: 1px solid #0d2451;
          position: relative;
        }
      }

      .right-bottom {
        width: 100%;
        padding-right: 0;

        .bottom1 {
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.content7 {
  height: 50%;
  width: 100%;
}
.echart {
  width: 100%;
  height: 100%;
}
</style>
